<template>
  <div class="app">
    <router-view></router-view>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/goodsclassify">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" to="/shoptag" :info="$store.getters.getAllPlic.count">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/usermy">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data: () => ({
    active: ''
  }),
  created() {},
  methods: {}
}
</script>

<style lang="less" scoped>
.app {
  .my-icon {
    height: 26px;
    .city {
      font-size: 16px;
    }
  }

  .sky-enter {
    transform: translateX(100%);
  }
  .sky-leave-to {
    transform: translateX(-100%);
    position: absolute;
  }

  .sky-enter-active,
  .sky-leave-active {
    transition: all 0.5s ease;
  }
}
</style>
